<template>
  <div class="component-attrs">
    <a v-if="docsLink" class="docs-link" :href="docsLink" target="_blank">
      <i class="el-icon-link" />
    </a>
    <h4 style="padding-left: 20px">{{ formData.uid }}.{{ formData.name }}</h4>
    <div class="pt10">
      <ve-form-builder
        :model="formData"
        :config="formConfig"
        @input="input"
        @update:config="updateConfig"
      />
    </div>
    <!-- <options v-if="isOpts" :config="config" @input="inputOpts" /> -->
    <!-- <button-group
      v-if="isButtonGroup"
      :config="config"
      :form-config="formConfig"
      @input="inputButtonGroup"
    /> -->
    <!-- <upload-attrs-form
      v-if="isUpload"
      :inherit-config="config"
      :form-config="formConfig"
      @input="inputUpload"
    />-->
    <!-- <TableColumns v-if="isTable" :config="config" @input="inputOpts" /> -->
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
</template>
<script>
import getComponentsForm from "@lib/config/componentsForm";
import docsUrl from "@lib/config/docsUrl";
import { objectFormat, isVal, toJson, json2Str } from "@/utils/tools";
import Options from "./Options";
import Vue from "vue";
// import ButtonGroup from "./ButtonGroup";
// Vue.component("button-group", ButtonGroup);

// import UploadAttrsForm from './UploadAttrsForm'
// import TableColumns from './TableColumns'
export default {
  name: "ComponentAttrs",
  components: {
    Options,
    // UploadAttrsForm,
    // TableColumns
  },
  props: {
    model: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      key: "",
      formData: {},
      formConfig: {},
    };
  },
  computed: {
    docsLink() {
      return docsUrl[this.key];
    },
  },
  watch: {
    model: {
      deep: true,
      immediate: true,
      handler(o) {
        ["slots", "col", "item", "widget", "dict", "table"].forEach((k) => {
          if (!o[k]) o[k] = {};
        });
        ["subWidgets", "buttonGroup"].forEach((k) => {
          if (!o[k]) o[k] = [];
        });
        this.formData = o;
        if (o.key && this.key !== o.key) {
          this.key = o.key;
          this.formConfig = getComponentsForm(o.key);
        }
      },
    },
  },
  methods: {
    inputButtonGroup(o) {
      console.log("inputButtonGroup:", objectFormat(o));
    },
    input(o) {
      console.log("input:", objectFormat(o));
      this.$emit("input", o);
    },
    updateConfig(o) {
      console.log("updateConfig:", objectFormat(o));
      this.formConfig = o;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/styles/vars";
.docs-link {
  position: fixed;
  display: block;
  width: 26px;
  height: 26px;
  top: 100px;
  right: $asideRightWidth - 26px;
  cursor: pointer;
  background: $--color-primary;
  z-index: 1;
  border-radius: 0 0 6px 0;
  text-align: center;
  line-height: 26px;
  color: #fff;
  font-size: 18px;
}
</style>
<style lang="scss">
.component-attrs {
  padding: 0 10px 10px;
  .el-select,
  .el-cascader,
  .el-input-number {
    width: 100%;
  }
}
</style>
